<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐在线播放器 - 学号-姓名</title>
    <style>
        /* CSS样式部分 */
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            width: 80%;
            max-width: 800px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }
        
        .player-header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .player-header h1 {
            margin: 0;
            font-size: 24px;
        }
        
        .player-header p {
            margin: 5px 0 0;
            color: #ccc;
        }
        
        .album-art {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .album-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .song-info {
            text-align: center;
            margin: 20px 0;
        }
        
        .song-info h2 {
            margin: 0;
            font-size: 22px;
        }
        
        .song-info p {
            margin: 5px 0 0;
            color: #aaa;
        }
        
        .progress-container {
            width: 100%;
            height: 6px;
            background-color: #444;
            border-radius: 3px;
            margin: 20px 0;
            cursor: pointer;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #1db954;
            border-radius: 3px;
            width: 0%;
            transition: width 0.1s linear;
        }
        
        .time-info {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            font-size: 12px;
            color: #aaa;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }
        
        .control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            margin: 0 15px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .control-btn:hover {
            color: #1db954;
        }
        
        .control-btn:active {
            transform: scale(0.95);
        }
        
        .play-btn {
            font-size: 36px;
        }
        
        .volume-container {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .volume-slider {
            width: 100px;
            margin-left: 10px;
        }
        
        .playlist {
            margin-top: 30px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .playlist h3 {
            margin: 0 0 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #444;
        }
        
        .playlist-item {
            padding: 8px 10px;
            border-radius: 5px;
            margin-bottom: 5px;
            background-color: rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .playlist-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .playlist-item.active {
            background-color: rgba(29, 185, 84, 0.3);
            color: #1db954;
        }
        
        /* 滚动条样式 */
        .playlist::-webkit-scrollbar {
            width: 8px;
        }
        
        .playlist::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        .playlist::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .container {
                width: 95%;
                padding: 15px;
            }
            
            .album-art {
                width: 150px;
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="player-header">
            <h1>音乐在线播放器</h1>
            <p>学号：23215220331 | 姓名：黄毅</p>
        </div>
        
        <div class="album-art">
            <img id="albumImage" src="https://via.placeholder.com/200" alt="专辑封面">
        </div>
        
        <div class="song-info">
            <h2 id="songTitle">歌曲名称</h2>
            <p id="songArtist">歌手名称</p>
        </div>
        
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="time-info">
            <span id="currentTime">0:00</span>
            <span id="duration">0:00</span>
        </div>
        
        <div class="controls">
            <button class="control-btn" id="prevBtn">⏮</button>
            <button class="control-btn play-btn" id="playBtn">▶</button>
            <button class="control-btn" id="nextBtn">⏭</button>
        </div>
        
        <div class="volume-container">
            <span class="control-btn">🔊</span>
            <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.7">
        </div>
        
        <div class="playlist">
            <h3>播放列表</h3>
            <div id="playlistItems">
                <!-- 播放列表项将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <audio id="audioPlayer"></audio>

    <script>
        // JavaScript部分
        document.addEventListener('DOMContentLoaded', function() {
            // 播放器元素
            const audioPlayer = document.getElementById('audioPlayer');
            const playBtn = document.getElementById('playBtn');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.getElementById('progressContainer');
            const currentTimeElement = document.getElementById('currentTime');
            const durationElement = document.getElementById('duration');
            const volumeSlider = document.getElementById('volumeSlider');
            const playlistItems = document.getElementById('playlistItems');
            const songTitle = document.getElementById('songTitle');
            const songArtist = document.getElementById('songArtist');
            const albumImage = document.getElementById('albumImage');
            
            // 音乐列表
            const songs = [
    {
        title: "轨迹",
        artist: "周杰伦",
        src: "music/轨迹.mp3",  // 相对路径
        cover: "images/cover1.jpg"
    },
    {
        title: "明明就",
        artist: "周杰伦",
        src: "music/明明就.mp3",
        cover: "images/cover2.jpg"
    },
    {
        title: "说好不哭",
        artist: "周杰伦/五月天",
        src: "music/说好不哭.mp3",
        cover: "images/cover3.jpg"
    }

];

            
            let currentSongIndex = 0;
            let isPlaying = false;
            
            // 初始化播放列表
            function initPlaylist() {
                playlistItems.innerHTML = '';
                songs.forEach((song, index) => {
                    const playlistItem = document.createElement('div');
                    playlistItem.classList.add('playlist-item');
                    if (index === currentSongIndex) {
                        playlistItem.classList.add('active');
                    }
                    playlistItem.textContent = `${song.title} - ${song.artist}`;
                    playlistItem.addEventListener('click', () => {
                        playSong(index);
                    });
                    playlistItems.appendChild(playlistItem);
                });
            }
            
            // 播放指定歌曲
            function playSong(index) {
                if (index >= 0 && index < songs.length) {
                    currentSongIndex = index;
                    const song = songs[currentSongIndex];
                    
                    audioPlayer.src = song.src;
                    songTitle.textContent = song.title;
                    songArtist.textContent = song.artist;
                    albumImage.src = song.cover;
                    
                    if (isPlaying) {
                        audioPlayer.play();
                    }
                    
                    // 更新播放列表高亮
                    const items = document.querySelectorAll('.playlist-item');
                    items.forEach((item, i) => {
                        if (i === currentSongIndex) {
                            item.classList.add('active');
                        } else {
                            item.classList.remove('active');
                        }
                    });
                }
            }
            
            // 播放/暂停
            function togglePlay() {
                if (isPlaying) {
                    audioPlayer.pause();
                    playBtn.textContent = '▶';
                } else {
                    audioPlayer.play();
                    playBtn.textContent = '⏸';
                }
                isPlaying = !isPlaying;
            }
            
            // 上一曲
            function prevSong() {
                currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
                playSong(currentSongIndex);
                if (isPlaying) {
                    audioPlayer.play();
                }
            }
            
            // 下一曲
            function nextSong() {
                currentSongIndex = (currentSongIndex + 1) % songs.length;
                playSong(currentSongIndex);
                if (isPlaying) {
                    audioPlayer.play();
                }
            }
            
            // 更新进度条
            function updateProgress() {
                const { currentTime, duration } = audioPlayer;
                const progressPercent = (currentTime / duration) * 100;
                progressBar.style.width = `${progressPercent}%`;
                
                // 更新时间显示
                currentTimeElement.textContent = formatTime(currentTime);
                if (duration) {
                    durationElement.textContent = formatTime(duration);
                }
            }
            
            // 格式化时间
            function formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
            }
            
            // 设置进度
            function setProgress(e) {
                const width = this.clientWidth;
                const clickX = e.offsetX;
                const duration = audioPlayer.duration;
                audioPlayer.currentTime = (clickX / width) * duration;
            }
            
            // 设置音量
            function setVolume() {
                audioPlayer.volume = this.value;
            }
            
            // 歌曲结束时自动播放下一首
            function songEnded() {
                nextSong();
            }
            
            // 事件监听
            playBtn.addEventListener('click', togglePlay);
            prevBtn.addEventListener('click', prevSong);
            nextBtn.addEventListener('click', nextSong);
            audioPlayer.addEventListener('timeupdate', updateProgress);
            audioPlayer.addEventListener('ended', songEnded);
            progressContainer.addEventListener('click', setProgress);
            volumeSlider.addEventListener('input', setVolume);
            
            // 初始化
            initPlaylist();
            playSong(currentSongIndex);
            audioPlayer.volume = volumeSlider.value;
        });
    </script>
</body>
</html>